@import "mixfunc";
@import "icomoon";

$graylight-color:#ccc;
$bg-color: #efefef;
$text-color: #4f4f4f;
$secondy-text-color: #D9DADA;
$highlight-text-color: white;
$button-color: #6cdcac;
$border-color: rgba(12, 12, 12, 0.5);

body{
  font-size:62.5%;
  text-align: center;
  font-family:'Open Sans',sans-serif;
}



.hero{
  //max-width: 100em;
  width: 100%;
  margin:0 auto;
  background: url("../images/herobg.jpg");
  /*auto： 背景图像的真实大小。
    cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
    背景图像始终被包含在容器内(会重复出现)
    */
  background-size: cover;
  //opacity: .5;
  //filter:"alpha(opacity=50)";

  header{
    img{
      width: 50px;;
      height: 50px;
      float: left;
    }
    ul{
      float: right;
      li{
        float:left;
        margin:0 .5em;
        padding: 1em;
        border:1px  solid transparent;
        border-radius: 2px;
        list-style-type: none;//去掉小黑点
        //&表示父元素选择器
        &:last-child{
          border:1px solid $graylight-color;
        }
      }
    }
    //在 浮动元素的父元素中清除浮动
    //如果不做清除浮动的动作，那么 header 之后的元素会在布局上受到影响
    @include clear_fix();
  }
  h1{
    font-size: 4em;
    padding:1em 0 0.5em 0;
    color:$highlight-text-color;
  }

  h2{
    font-size:2em;
    color:$secondy-text-color;
  }

  form{
    padding:2em 0 4em 0;

    input[type="text"]{
      padding:1em;
      border:0;
      width:18em;
      -webkit-border-radius:2px 0 0 2px;
      -moz-border-radius:2px 0 0 2px;
      border-radius:2px 0 0 2px;
      opacity: .3;
    }

    input[type="button"]{
      color: $highlight-text-color;
      padding:1em;
      border:0;
      width: 6em;
      text-transform: uppercase;
      font-weight: bold;
      border-radius: 0 2px 2px 0;
      background-color: $button-color;
    }
  }
}

// 数字的样式
.numbers{
  width:75%;
  //width:80em;
  margin:0 auto;
  position:relative;
  top:-3em;
  background:$bg-color;
  ul{
    padding-left: 0px;
    li{
      float:left;
      width:25%;
      box-sizing: border-box;//宽度包含边框
      border-top:1px solid $secondy-text-color;
      border-bottom:1px solid $secondy-text-color;
      border-left:1px solid $secondy-text-color;
      list-style-type: none;

      &:last-child{
        border-right: 1px solid $secondy-text-color;
      }

      h2{
        font-size: 2em;
        padding:1em 0;
      }
      h3{
        padding:0 0 2em 0;
      }
    }
    @include clear_fix;
  }
}

//how it works
.how-it-works{
  h2{
    font-size: 2em;
    text-transform: uppercase;
    padding:1em 0;

    //伪元素 是一个不存在的html 元素 但是可以为他设置样式
    &:after{
      content:"";//该元素的文本为空
      display: block;
      background-color: $border-color;
      width: 2em;
      height:.1em;
      margin: .4em auto;
    }
  }
  ul{
    padding-left: 0px;
    li{
      list-style-type: none;
      float: left;
      width: 33.33%;
      // 所以新增的元素会落在 span 的后面
      &:first-child:before{
        @include line;
        background: #dc5e58;
      }

      &:nth-child(2):before{
        @include line;
        background: #1c4ddc;
      }

      &:last-child:before{
        //@include line;
        //background: #d127dc;
        display: none;
      }
    }

    @include clear_fix;
  }
  .detail{

    .number{
      font-size: 2em;
      color: $border-color;
      border: 1px solid $border-color;
      width: 1em;
      height: 1em;
      display: block;
      margin: 1em auto 2em auto;
      padding: .4em;
      @include border-radius(100%);
      background-color: $bg-color;
    }
    i{
      font-size: 3.6em;
    }
    .icon-list{
      color: #ECA95A;
    }

    .icon-pencil{
      color: #AC9CD2;
    }

    .icon-users{
      color: #4D99CB;
    }

  }
}
